<template>
    <div class="content">
        <TableLayout form-title="">
            <div slot="form-title" class="table-title"></div>
            <el-form :model="formInline" ref="formInline" class="formInline" label-width="76px" 
            label-position="right"  slot="form">          
                <el-row :gutter="41">
                    <el-col :span="8">
                       <el-form-item label="学校名称" prop="schoolName">
                                <school v-model="formInline.schoolName" style="width:100%"
                                @change='schoolChange'></school>
                             </el-form-item>
                    </el-col> 
                    <el-col :span="8">
                       <el-form-item label="班级">
                                <el-select v-model="formInline.classes" placeholder="请选择班级" @change="classChange"
                                style="width:100%">
                                    <el-option v-for="(item,index) in classesArr" 
                                    :key="index" :label="item.sNickName" :value="item.pId"> 
                                    </el-option>
                                </el-select>
                        </el-form-item>
                    </el-col>
                    <div class="top-seach">
                        <el-button type="primary" class="top-btn" @click="onSubmit('formInline')">查询</el-button>
                    </div>
                </el-row>
            </el-form>
           <div class="table-title" slot="table-title">
                 <div class="btnPosition">
                    <exportExcel></exportExcel>
                </div>
            </div>
           <el-table  border style="width: 100%" :data="AnnounceList" v-loading="loading"  @sort-change="sortChange">
                <el-table-column align="center" label="学校名称">
                     <template scope="scope">
                        <span>{{ scope.row.s_name ?scope.row.s_name:'--' }}</span>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="班级名称" prop="sDesc">
                     <template scope="scope">
                        <span>{{ scope.row.s_nick_name ?scope.row.s_nick_name:'--' }}</span>
                    </template>
                </el-table-column>
                <el-table-column align="center" sortable="custom" label="学生人数" prop="sUpdateTime">
                     <template scope="scope">
                        <span>{{ scope.row.student_count}}</span>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="统计日期">
                     <template scope="scope">
                        <span>{{ scope.row.report_date ?scope.row.report_date:'--' }}</span>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination-container" style="text-align:right">
                <el-pagination
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="listQuery.total"
                    :current-page.sync="listQuery.page"
                    :page-sizes="config.pageSizes"
                    :page-size="config.pageSize"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange">
                </el-pagination>
            </div>
        </TableLayout>
    </div>
</template>

<script>
import TableLayout from 'components/TableLayout';
import { mapState, mapActions, mapGetters } from 'vuex';
import school from 'components/SchoolClasss/school';
import { listClassInfoBySchoolId} from 'api/reportForms';
import exportExcel from 'components/ExportExcel/index'; 
export default{
    name: 'classStaticList',
    components: {exportExcel, TableLayout, school},
    data() {
        return {
            formInline: {// form表单数据
                schoolName: '',
                schoolId: '',
                classes: '',
                startDate: '',
                pickerOptions1: {
                    disabledDate(time) {
                        return (time.getTime()) > (Date.now());
                    }
                }
            },
            AnnounceList: [],
            dataNum: 1, // 表格1显示条数，初始为1
            listQuery: {// 分页
                page: 1,
                total: 0
            },
            loading: true,
            classesArr: [],
            multipleSelection: [],
            flagType: true
        }
    },
   
    computed: {
        ...mapState({
            config: state => state.config.table
        }),
        ...mapGetters([
            'uid'
        ])
    },

    // 初始化
    created() {
        this.searchFetchData();
    },
 
    methods: {
        // 全局获取行数
        ...mapActions(['ChangePageSize']),
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
                     // 获取学校id -通过id得到班级列表
        schoolChange(val) {
            this.formInline.schoolId = val;
            this.formInline.classes='';
            this.classesArr=[];
            if (val) {
                listClassInfoBySchoolId(val).then(res => {
                    this.classesArr=res.data.content;
                    this.classesArr.unshift({
                        pId: '', sNickName: '请选择'
                    })
                })
            }
        },
           // 班级改变时,得到班级名字
        classChange(val) {
            if (val) {
                let classObj= this.classesArr.find(item => {
                    return item.pId==val
                })
                this.formInline.className=classObj.sNickName;
            } else {
                this.formInline.className=''
            }
        },
        searchFetchData() {
            // this.loading = true;
            // let page_index=this.listQuery.page,
            //     page_size=this.config.pageSize,
            //     query_id=8,
            //     show_list=false, // true 返回表记录数据
            //     type='event',
            //     real_time=false;   // 分析类型 event user;
            // let query={
            //     order_field: 'student_count', // 排序
            //     order_desc: this.flagType,
            //     schoolName: this.formInline.schoolId,
            //     className: this.formInline.className
            // };
            // this.jsonStr={
            //     'page_index': this.listQuery.page,
            //     'page_size': this.config.pageSize,
            //     'query_id': 8, 
            //     'show_list': false, 
            //     'real_time': false,
            //     'type': 'event',
            //     'file_name': '班级用户统计', 
            //     'field_names': [
            //             ['学校名称', 's_name'],
            //             ['班级名称', 's_nick_name'], 
            //             ['学生人数', 'student_count'], 
            //             ['统计日期', 'report_date']
            //     ],
            //     query
            // };
            // queryTable(query, query_id, page_index, page_size, show_list, type, real_time).then(res => {
            //     this.loading = false;
            //     this.AnnounceList = res.data.content.rows;
            //     this.listQuery.total = res.data.content.total_rows;
            // }).catch(() => {
            //     this.loading = false;
            // });
             
        },
        
        sortChange({ column, prop, order }) {
            this.flagType=order=='ascending'?false:true;
            this.searchFetchData()
        },
      
    
        // 分页
        handleSizeChange(val) {
            this.listQuery.page = 1;
            this.ChangePageSize(val);
            this.searchFetchData();
        },
        handleCurrentChange(val) {
            this.listQuery.page = val;
            this.searchFetchData();
        },
        
        // 表单查询
        onSubmit() {
            this.loading = true;
            this.listQuery.page = 1;
            this.searchFetchData();
        }
    }
}
</script>
<style lang="scss" scoped>
.content {
    position: relative;
    padding: 0px;
    $bgcolor:#fff;
    label{
        text-align:left;
    }
    .el-tag{
            margin-left:5px;
            background:#f9f9f9;
            color:#444;
        }
    .formInline {
        .formBtn{
            width: 100%;
            height: 70px;
            border-top: 1px solid #dddddd;
            position: relative;
            .btnPosition{
                position: absolute;
                right:0px; 
                top: 18px;
            }
        }
    }
    .footer{
            text-align:center;
            margin-top:40px;
        }
    .footer .el-button{
            padding:10px 40px;
        }
        .top-seach {
            float: right;
            padding-right: 20px;
            &::after {
                content: "\0020";
                display: block;
                height: 0;
                clear: both;
            }
        }
}

</style>